<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style type="text/css">
    .income {
        color: rgb(255, 86, 86);
        animation: income 1.2s;
    }
</style>
<div class="biaodi_list">
    <div>
        <a href="#">借款标</a>
        <a href="#">定投宝</a>
    </div>
    <table>
        <tr>
            <th style="text-align: left;">融资金额（元）</th>
            <th style="width: 88px;">年化收益</th>
            <th>还款期限</th>
            <th>可投资金额（元）</th>
            <th>进度</th>
            <th>状态</th>
        </tr>
        <c:forEach items="${borrowInfos.content}" var="obj">
            <tr>
                <td class="biaodi_list_title">
                    <p><a href="#">${obj.name}</a></p>
                    <fmt:formatNumber value="${obj.totalMoney}" type="CURRENCY"/>
                </td>
                <td class="income" align="center"><fmt:formatNumber value="${obj.investRate / 100}" type="PERCENT"/></td>
                <td align="center">${obj.period}月</td>
                <td align="center"><fmt:formatNumber value="${obj.totalMoney - obj.investMoney}" type="CURRENCY"/></td>
                <td class="biaodijindu" align="center">
                    <fmt:formatNumber value="${obj.investMoney / obj.totalMoney}" type="PERCENT"/>
                    <div style="width: 220px;height: 10px;background-color: #d0d0d0;text-align: left;border-radius: 5px;">
                        <div style="width: <fmt:formatNumber value="${(obj.totalMoney = obj.investMoney) / 100}" type="PERCENT"/>;height: 10px;background-color: #cca347;border-radius: 5px;"></div>
                    </div>
                </td>
                <td>
                    <a href="<c:url value="/borrow/detail/id/${obj.id}"/>" target="_blank">
                        <fmt:message key="${obj.status}"/>
                    </a>
                </td>
            </tr>
        </c:forEach>
    </table>
    <div style="align-content: center;height: 20px;">
        <div id="borrowPage"></div>
    </div>
</div>
<div style="height: 10px;"></div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#borrowPage").jqPaginator({
            totalPages:${borrowInfos.totalPages},
            currentPage:${borrowInfos.number+1},
            page:'<li><a href="">{{page}}</a></li>'
        });
    });
</script>
